import { h } from 'vue'
import {
  useFormatDateHms,
  useFormatDateYYYYMMDD,
  useFormatterEmpNameAndId,
  useFormatterNumberLocaleString,
  useFormatterValueOrLine
} from '/@/hooks/formatter'
import { uniqueId } from 'lodash-unified'
import type { Component, VNode } from 'vue'

import { CsFormItemComponentProps } from 'csui'
interface FormItemTextProps<
  T extends Record<string, any>,
  P extends keyof T
> {
  /** 格式化函数 */
  formatter?: (value: T[P], formData: T) => any
  /** css类 */
  class?: string
  /** 前缀文字 */
  suffix?: string
  /** 后缀文字 */
  prefix?: string
  [property: string]: any
}

type UseFormItemTextProps<
  D extends Record<string, any>,
  P extends keyof Readonly<D>
> = UseFormItemProps<FormItemTextProps<D, P>, D, P>

/**
 * 显然字段文本
 * @param content 文本
 * @param component 包装文本的html元素
 * @param props item的其他属性
 * @returns VNode
 */
function emptyComponent(
  content: string,
  component = 'span',
  props: FormItemTextProps<any, any> = {}
) {
  return h(
    component,
    {
      class: 'cs-form-item__empty-com'
    },
    `${props.suffix ? `${props.suffix} ` : ''}${useFormatterValueOrLine(
      content
    )}${props.prefix ? ` ${props.prefix}` : ''}`
  )
}

/**
 * 纯文本显示
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @param textComponent 文本组件, 默认span
 * @returns form-item-data
 */
export function useText<
  T extends Record<string, any>,
  P extends keyof T
>(
  prop: P,
  label: string,
  props: UseFormItemTextProps<T, P> = {},
  textComponent = 'span'
): FormItemProps<T, P> {
  return {
    label,
    prop,
    component: (componentProps: CsFormItemComponentProps<T, P>) => {
      return emptyComponent(
        componentProps['model-value'],
        textComponent,
        props.props
      )
    },
    readonly: true,
    ...props
  }
}

/**
 * 纯文本显示, 带小时后缀
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useTextPrefixHours<
  T extends Record<string, any>,
  P extends keyof T
>(
  prop: P,
  label: string,
  props: UseFormItemTextProps<T, P> = {}
): FormItemProps<T, P> {
  if (!props.props) {
    props.props = {}
  }
  props.props.prefix = '小时'
  return useText(prop, label, props)
}

/**
 * 格式化纯文本显示
 * @param label item.label
 * @param formatter formatter(formData)
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useTextFormatter<
  T extends Record<string, any>,
  P extends keyof T
>(
  label: string,
  formatter: (formData: T) => string | VNode | Component = formData =>
    JSON.stringify(formData),
  props: UseFormItemTextProps<T, P> = {}
): FormItemProps<T, P> {
  return {
    prop: uniqueId(),
    label,
    component: (componentProps: CsFormItemComponentProps<T, P>) => {
      const res = formatter(componentProps['form-data'])
      switch (true) {
        case typeof res === 'string': {
          // 如果是字符串, 包装上空组件
          return emptyComponent(res, 'span', props.props)
        }
        default: {
          return res
        }
      }
    },
    readonly: true,
    ...props
  }
}

/**
 * useFormatDateYYYYMMDD
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useTextFormatterYYYYMMDD<
  T extends Record<string, any>,
  P extends keyof T
>(
  prop: P,
  label: string,
  props: UseFormItemTextProps<T, P> = {}
): FormItemProps<T, P> {
  if (!props.props) {
    props.props = {}
  }
  return useTextFormatter(
    label,
    formData => useFormatDateYYYYMMDD(formData[prop]),
    props
  )
}

/**
 * useFormatDateHms
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useTextFormatterHms<
  T extends Record<string, any>,
  P extends keyof T
>(
  prop: P,
  label: string,
  props: UseFormItemTextProps<T, P> = {}
): FormItemProps<T, P> {
  if (!props.props) {
    props.props = {}
  }
  return useTextFormatter(
    label,
    formData => useFormatDateHms(formData[prop]),
    props
  )
}

/**
 * 构造【name（empid）】格式
 * @param label item.label
 * @param propName 名字字段名
 * @param propId ID字段名
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useTextEmpNameAndId<
  T extends Record<string, any>,
  P extends keyof T
>(
  label: string,
  propName: keyof T = 'empName',
  propId: keyof T = 'empNo',
  props: UseFormItemTextProps<T, P> = {}
): FormItemProps<T, P> {
  if (!props.props) {
    props.props = {}
  }
  return useTextFormatter(
    label,
    formData => useFormatterEmpNameAndId(formData, propName, propId),
    props
  )
}

/**
 * 显示提示文字
 * @param content 提示文字内容
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useTextTips<
  T extends Record<string, any>,
  P extends keyof T
>(
  content: string,
  props: UseFormItemTextProps<T, P> = {}
): FormItemProps<T, P> {
  return useTextFormatter('', () => content, {
    labelWidth: 0,
    class: 'cs-form-item__tips',
    ...props
  })
}

/**
 * 显示数字格式化 或 -
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useTextNumberLocaleString<
  T extends Record<string, any>,
  P extends keyof T
>(
  prop: P,
  label: string,
  props: UseFormItemTextProps<T, P> = {}
): FormItemProps<T, P> {
  if (!props.props) {
    props.props = {}
  }
  return useTextFormatter(
    label,
    formData => useFormatterNumberLocaleString(formData[prop]),
    props
  )
}
